<template>
  <div style="height: 600px;">
    <svg id="markmap" style="width: 100%; height: 100%;">
    </svg>
  </div>
</template>

<script>
import { Transformer } from "markmap-lib";
import * as markmap from "markmap-view";

const transformer = new Transformer();
const { Markmap, loadCSS, loadJS } = markmap;

export default {
  name: "Markmap",  
  data() {
    return {
      content:'',
      map: Object,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 加载script和styles
      const { styles, scripts } = transformer.getAssets();
      if (styles) loadCSS(styles);
      if (scripts) loadJS(scripts, { getMarkmap: () => markmap });

      // 初始数据
      this.map = Markmap.create("#markmap", null);
      const { root } = transformer.transform("# 主节点");
      this.map.setData(root, null);
     
      // 接收的数据
      this.$bus.$on("changes", (content) => {
        const { root } = transformer.transform(content);
        // 修改数据
        this.map.setData(root, null);
      });
     
    },
  },
};
</script>
